<script setup lang="ts">
import { ref } from "vue";
import topBack from "@/components/Topback/index.vue";
import blueTitle from "@/components/blueTitle/index.vue";
import mapdemo from "@/components/map/index.vue";
const emits = defineEmits(["back"]);
const parentEvent = () => {
  emits("back");
};
const info = ref([
  {
    title: "案件上报",
    time: "2023-08-28 10:23:23",
    name: "五小福（上海五福）",
    operate: "案件上报",
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",
  },
  {
    title: "案件上报1",
    time: "2023-08-28 10:23:23",
    name: "五小福（上海五福）",
    operate: "案件上报",
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",
  },
  {
    title: "案件上报2",
    time: "2023-08-28 10:23:23",
    name: "五小福（上海五福）",
    operate: "案件上报",
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",
  },
  {
    title: "案件上报3",
    time: "2023-08-28 10:23:23",
    name: "五小福（上海五福）",
    operate: "案件上报",
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",
  },
]);
const active_tab = ref(false);
const activeTab = () => {};
</script>
<template>
  <div class="main">
    <div class="topbtn">
      <top-back @child-back="parentEvent"> </top-back>
    </div>
    <div class="public-detail">
      <div class="left-detail">
        <div class="tab-box">
          <div
            class="box-item"
            :class="!active_tab ? ' active-box' : ''"
            @click="active_tab = false"
          >
            当前选中页
          </div>
          <div
            class="box-item"
            :class="active_tab ? ' active-box' : ''"
            @click="active_tab = true"
          >
            页面2
          </div>
        </div>
        <div class="content">
          <div class="top-box">
            <blue-title :text="'基础信息'"></blue-title>
            <div class="detail-box">
              <a-row>
                <a-col :span="12">
                  <div class="detail-item">
                    <span class="label">问题类型：</span>
                    <span>xxx</span>
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="detail-item">
                    <span class="label">问题类型：</span>
                    <span>xxx</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <div class="detail-item">
                    <span class="label">问题类型：</span>
                    <span>xxx</span>
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="detail-item">
                    <span class="label">问题类型：</span>
                    <span>xxx</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <div class="detail-item">
                    <span class="label">问题类型：</span>
                    <span>xxx</span>
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="detail-item">
                    <span class="label">问题类型：</span>
                    <span>xxx</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <div class="detail-wrap">
                    <span class="label">问题描述：</span>
                    <span
                      >但无论是哪种类型用户，都一定会有同种共性——好奇心。好奇心足以牵引着一个人对所产生事物的关注程度和好感度，从而使得他由被动接受信息直接转型为主动了解信息</span
                    >
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="middle-box">
            <blue-title :text="'其他信息'"></blue-title>
            <a-row>
              <a-col :span="12">
                <div class="detail-img">
                  <span class="label">现场照片：</span>
                  <div class="imgs-box">
                    <img src="../../../assets/images/logo.png" alt="" />
                    <img src="../../../assets/images/logo.png" alt="" />
                    <img src="../../../assets/images/logo.png" alt="" />
                  </div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="detail-img">
                  <span class="label">现场视频：</span>
                  <div class="imgs-box">
                    <img src="../../../assets/images/logo.png" alt="" />
                    <img src="../../../assets/images/logo.png" alt="" />
                    <img src="../../../assets/images/logo.png" alt="" />
                  </div>
                </div>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <div class="detail-file">
                  <span class="label">附件：</span>
                  <div class="files-box">
                    <div class="box-item">
                      <div class="file-name">
                        <i class="iconfont icon-fujian"></i> 附件123
                      </div>
                      <div><i class="iconfont icon-piliangdaoru"></i></div>
                    </div>
                    <div class="box-item">
                      <div class="file-name">
                        <i class="iconfont icon-fujian"></i>
                        附件123附件123附件123附件123附件123附件123附件123附件123附件123附件123附件123
                      </div>
                      <div><i class="iconfont icon-piliangdaoru"></i></div>
                    </div>
                    <div class="box-item">
                      <div class="file-name">
                        <i class="iconfont icon-fujian"></i> 附件123
                      </div>
                      <div><i class="iconfont icon-piliangdaoru"></i></div>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="bottom-box">
            <blue-title :text="'流程信息'"></blue-title>
            <a-timeline>
              <a-timeline-item v-for="item in info" :key="item.title">
                <div class="card-cont">
                  <div class="card-box">
                    <div class="title">
                      <div class="text">{{ item.title }}</div>
                      <div class="time">{{ item.time }}</div>
                    </div>
                    <div class="list">
                      <div class="name">上报人：</div>
                      <div class="val">{{ item.name }}</div>
                    </div>
                    <div class="list">
                      <div class="name">操作：</div>
                      <div class="val">{{ item.operate }}</div>
                    </div>
                    <div class="block">
                      <div class="name">问题内容：</div>
                      <div class="val">{{ item.content }}</div>
                    </div>
                  </div>
                </div>
              </a-timeline-item>
            </a-timeline>
          </div>
        </div>
      </div>

      <div class="right-map">
        <blue-title :text="'地图定位'"></blue-title>
        <a-row class="row_box">
          <a-col :span="24">
            <div class="detail-item">
              <span class="label">详细地址：</span>
              <span>海南省万宁市友爱大道385号海南大学1号楼</span>
            </div>
          </a-col>
        </a-row>
        <div class="map-box">
          <mapdemo></mapdemo>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding: 20px;
  .public-detail {
    width: 100%;
    height: calc(100% - 52px);
    display: flex;
    justify-content: space-between;
    .left-detail {
      width: calc(50% - 10px);
      height: 100%;
      .tab-box {
        display: flex;
        .box-item {
          cursor: pointer;
          height: 40px;
          line-height: 40px;
          margin-right: 20px;
          min-width: 120px;
          background: #eeeeee;
          color: rgba(0, 0, 0, 0.65);
          border-radius: 2px 0px 0px 2px;
          text-align: center;
        }
        &:last-child {
          margin-right: 0px;
        }
        .active-box {
          background: #ffffff;
          color: #1677ff;
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 42px);
        overflow-y: auto;
        .top-box {
          background: #fff;
          padding: 20px;
          border-radius: 4px;
        }
        .middle-box {
          background: #fff;
          padding: 20px;
          margin-top: 20px;
          border-radius: 4px;
        }
        .bottom-box {
          background: #fff;
          padding: 20px;
          margin-top: 20px;
          border-radius: 4px;

          .card-cont {
            padding-bottom: 20px;
          }

          .ant-timeline-item:last-child .card-cont {
            padding-bottom: 0;
          }

          .card-box {
            border-radius: 4px;
            background-color: rgba(245, 245, 245, 1);
            padding: 10px;

            .title {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .text {
                color: rgba(22, 119, 255, 1);
                font-size: 16px;
              }

              .time {
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
              }
            }

            .list {
              display: flex;
              margin-top: 10px;
            }

            .block {
              margin-top: 10px;

              .name {
                margin-bottom: 5px;
              }
            }

            .name {
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
            }

            .val {
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
            }
          }
        }
      }
    }
    .right-map {
      width: calc(50% - 10px);
      height: 100%;
      background: #fff;
      padding: 20px;
      .map-box {
        width: 100%;
        height: calc(100% - 84px);
      }
    }
  }
  .detail-item {
    display: flex;
    margin-bottom: 10px;
    .label {
      color: rgba(0, 0, 0, 0.45);
      width: auto;
    }
    .txt {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 5px;
    }
  }
  .detail-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    .label {
      color: rgba(0, 0, 0, 0.45);
      width: auto;
    }
    .txt {
      color: rgba(0, 0, 0, 0.85);
      margin-top: 5px;
    }
  }
  .detail-img {
    display: flex;
    margin-bottom: 10px;
    .label {
      color: rgba(0, 0, 0, 0.45);
      width: auto;
    }
    .imgs-box {
      img {
        width: 88px;
        height: 88px;
        padding: 8px;
        border-radius: 2px;
        border: 1px solid rgba(217, 217, 217, 1);
        margin-right: 15px;
      }
      &:last-child {
        margin-right: 0px;
      }
    }
  }
  .detail-file {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;

    width: 100%;
    .label {
      color: rgba(0, 0, 0, 0.45);
      width: auto;
    }
    .files-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 5px;

      .box-item {
        width: 100%;
        height: 32px;
        line-height: 32px;
        border-radius: 2px;
        margin-bottom: 10px;
        max-width: 360px;
        padding: 0px 10px;
        display: flex;
        justify-content: space-between;
        .file-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: calc(100% - 20px);
          i {
            margin-right: 5px;
          }
        }
      }

      &:last-child {
        margin-bottom: 0px;
      }
    }
    .files-box :hover {
      background-color: rgba(240, 245, 255, 1);
      color: rgba(22, 119, 255, 1);
    }
  }
}
</style>
